<template>
  <e-select v-model="model" style="width: 200px">
    <e-optionGroup label="Hot Cities">
      <e-option v-for="item in cityList1" :value="item.value" :key="item.value">{{
        item.label
      }}</e-option>
    </e-optionGroup>
    <e-optionGroup label="Other Cities">
      <e-option v-for="item in cityList2" :value="item.value" :key="item.value">{{
        item.label
      }}</e-option>
    </e-optionGroup>
  </e-select>
</template>
<script>
export default {
  data() {
    return {
      cityList1: [
        {
          value: 'New York',
          label: 'New York',
        },
        {
          value: 'London',
          label: 'London',
        },
        {
          value: 'Sydney',
          label: 'Sydney',
        },
      ],
      cityList2: [
        {
          value: 'Ottawa',
          label: 'Ottawa',
        },
        {
          value: 'Paris',
          label: 'Paris',
        },
        {
          value: 'Canberra',
          label: 'Canberra',
        },
      ],
      model: '',
    }
  },
}
</script>
